<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>域名审核 - 学习二级域名分发系统</title>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="stylesheet" type="text/css" href="/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <!--消息提示css-->
    <link rel="stylesheet" type="text/css" href="/css/animate.min.css">
    <!--表格插件css-->
    <link rel="stylesheet" href="/js/bootstrap-table/bootstrap-table.min.css">
    <!--日期选择器css-->
    <link rel="stylesheet" type="text/css" href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
    <!--时间日期选择器css-->
    <link rel="stylesheet" type="text/css" href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.min.css">
    <!--对话插件css-->
    <link rel="stylesheet" type="text/css" href="/js/jquery-confirm/jquery-confirm.min.css">
</head>

<body>

    <div class="container-fluid">

        <div class="row">

            <div class="col-lg-12">
                <div class="card">
                    <header class="card-header">
                        <div class="card-title">解析列表</div>
                    </header>
                    <div class="card-body">
                        <table id="table"></table>

                    </div>
                </div>
            </div>

        </div>

    </div>

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/popper.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <!--日期选择器js-->
    <script type="text/javascript" src="/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>

    <!--时间日期选择器js-->
    <script type="text/javascript" src="/js/momentjs/moment.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="/js/momentjs/locale/zh-cn.min.js"></script>
    <script type="text/javascript" src="/js/main.min.js"></script>
    <!--弹窗插件js-->
    <script type="text/javascript" src="/js/bootstrap-notify.min.js"></script>
    <!--加载插件js-->
    <script type="text/javascript" src="/js/lyear-loading.js"></script>
    <!--表格插件js-->
    <script src="/js/bootstrap-table/bootstrap-table.js"></script>
    <script src="/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <!--弹窗插件-->
    <script type="text/javascript" src="/js/jquery-confirm/jquery-confirm.min.js"></script>

    <script>
        /**
         * 分页相关的配置
         **/
        const pagination = {
            // 分页方式：[client] 客户端分页，[server] 服务端分页
            sidePagination: "server",
            // 初始化加载第一页，默认第一页
            pageNumber: 1,
            // 每页的记录行数
            pageSize: 10,
            // 可供选择的每页的行数 - (亲测大于1000存在渲染问题)
            pageList: [5, 10, 25, 50, 100],
            // 在上百页的情况下体验较好 - 能够显示首尾页
            paginationLoop: true,
            // 展示首尾页的最小页数
            paginationPagesBySide: 2,
        };

        /**
         * 按钮相关配置
         **/
        const button = {
            // 按钮的类
            buttonsClass: 'default',
            // 类名前缀
            buttonsPrefix: 'btn'
        }

        /**
         * 图标相关配置
         **/
        const icon = {
            // 图标前缀
            iconsPrefix: 'mdi',
            // 图标大小
            iconSize: 'mini',
            // 图标的设置
            icons: {
                columns: 'mdi-table-column-remove',
                paginationSwitchDown: 'mdi-door-closed',
                paginationSwitchUp: 'mdi-door-open',
                refresh: 'mdi-refresh',
                toggleOff: 'mdi-toggle-switch-off',
                toggleOn: 'mdi-toggle-switch',
                fullscreen: 'mdi-monitor-screenshot',
                detailOpen: 'mdi-plus',
                detailClose: 'mdi-minus'
            }
        };

        /**
         * 表格相关的配置
         **/
        const table = {
            classes: 'table table-bordered table-hover table-striped lyear-table',
            // 请求地址
            url: '/admin/censor_api',
            // 唯一ID字段
            uniqueId: 'id',
            // 每行的唯一标识字段
            idField: 'id',
            // 是否启用点击选中行
            clickToSelect: true,
            // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
            // showToggle: true,
            // 请求得到的数据类型
            dataType: 'json',
            // 请求方法
            method: 'post',
            // 工具按钮容器
            toolbar: '#toolbar',
            // 是否分页
            pagination: true,
            // 是否显示所有的列
            showColumns: true,
            // 是否显示刷新按钮
            showRefresh: true,
            // 显示图标
            showButtonIcons: true,
            // 显示文本
            showButtonText: false,
            // 显示全屏
            showFullscreen: true,
            // 开关控制分页
            showPaginationSwitch: true,
            // 总数字段
            totalField: 'total',
            // 当字段为 undefined 显示
            undefinedText: '-',
            // 排序方式
            sortOrder: "desc",
            ...icon,
            ...pagination,
            ...button
        };

        /**
         * 用于演示的列信息
         **/
        const columns = [{
            field: 'dns_id',
            title: '编号',
            // 使用[align]，[halign]和[valign]选项来设置列和它们的标题的对齐方式。
            // h表示横向，v标识垂直
            align: 'center',
            // 是否作为排序列
            sortable: true,
            visible: false,
            // 当列名称与实际名称不一致时可用
            sortName: 'sortId',
            switchable: false,
            // 列的宽度
            width: 8,
            // 宽度单位
            widthUnit: 'rem'
        }, {
            field: 'usernick',
            align: 'center',
            title: '用户名',
            titleTooltip: '正在使用的用户名',
        }, {
            field: 'type',
            align: 'center',
            title: '类型',
            titleTooltip: '解析类型',
        }, {
            field: 'value',
            align: 'center',
            title: '值',
            titleTooltip: '解析值',
        }, {
            field: 'domain',
            align: 'center',
            title: '完整域名',
            titleTooltip: '由自定域名拼接而成',
            formatter: function (value, row, index) {
                return row.sub + "." + row.dom;
            }
        }, {
            field: 'is_record',
            align: 'center',
            title: '是否备案',
            titleTooltip: '主域名是否备案',
            formatter: function (value, row, index) {
                if (value) {
                    return "已备案";
                }
                return "未备案";
            }
        }, {
            field: 'audit',
            align: 'center',
            title: '审查时间',
            titleTooltip: '上一次该域名的审查时间',
            sortable: true,
        }, {
            field: 'is_delete',
            align: 'center',
            title: '操作',
            formatter: function (value, row, index) {
                var value = "<text class='badge bg-success'onclick='sc(\"" + row.sub + "." + row.dom + "\"," + row.dns_id + ")'>审查</text><text class='badge bg-warning' onclick='qr(" + row.dns_id + ")'>封禁</text>";
                return value;
            }
        }];

        function sc(url, dns_id) {
            $.ajax({
                url: "/admin/censor_api",
                type: "POST",
                data: {
                    "tag": "censor",
                    "dns_id": dns_id
                },
                success: function (data) {
                    if (data.code) {
                        errify(data.msg);
                    } else {
                        window.open("http://" + url, "_blank");
                    }
                },
                error: function (data) { 
                    errify("网络错误");
                },
            });
        }

        function qr(id) {
            $.alert({
                icon: 'mdi mdi-alert',
                type: 'orange',
                title: "注意!!",
                content: '确定要封禁该域名吗？',
                buttons: {
                    confirm: {
                        text: "干他",
                        btnClass: 'btn-red',
                        action: function () {
                            $.confirm({
                                title: '封禁操作',
                                content: '<div class="form-group p-1 mb-0">' +
                                    '  <label class="control-label">请输入操作原因</label>' +
                                    '  <input autofocus="" type="text" id="input-msg" placeholder="请输入.." class="form-control">' +
                                    '</div>',
                                buttons: {
                                    sayMyName: {
                                        text: '提交',
                                        btnClass: 'btn-orange',
                                        action: function () {
                                            var input = this.$content.find('input#input-msg');
                                            var errorText = this.$content.find('.text-danger');
                                            $.ajax({
                                                url: '/admin/censor_api',
                                                type: 'post',
                                                data: {
                                                    'dns_id': id,
                                                    'comment': input.val(),
                                                    'tag': 'ban'
                                                },
                                                success: function (data) {
                                                    if (data.code) {
                                                        errify(data.msg);
                                                    } else {
                                                        $.alert({
                                                            icon: 'mdi mdi-check',
                                                            type: 'green',
                                                            title: "成功",
                                                            content: '封禁成功',
                                                            buttons: {
                                                                confirm: {
                                                                    text: "好的",
                                                                    btnClass: 'btn-green'
                                                                }
                                                            }
                                                        });
                                                        $('table').bootstrapTable('refresh');
                                                    }
                                                },
                                                error: function (data) {
                                                    errify("封禁失败");
                                                }
                                            });
                                        }
                                    },
                                    '取消': function () { }
                                }
                            });
                        }
                    },
                    cancel: {
                        text: "取消"
                    }
                }
            })
        }

        // 错误的弹窗
        function errify(msg) {
            $.notify({
                icon: 'mdi mdi-alert',
                message: msg
            }, {
                type: 'danger',
                allow_dismiss: true,
                newest_on_top: false,
                placement: {
                    from: 'top',
                    align: 'right'
                },
                offset: {
                    x: 20,
                    y: 20
                },
                spacing: 10,
                z_index: 9999,
                delay: 5000,
                animate: {
                    enter: 'animate__animated animate__fadeInDown',
                    exit: 'animate__animated animate__fadeOutUp'
                },
                onClosed: null,
                mouse_over: null
            });
        }

        $('table').bootstrapTable({
            ...table,
            // 自定义的查询参数
            queryParams: function (params) {
                return {
                    // 每页数据量
                    limit: params.limit,
                    // sql语句起始索引
                    offset: params.offset,
                    page: (params.offset / params.limit) + 1,
                    // 排序的列名
                    sort: params.sort,
                    // 排序方式 'asc' 'desc'
                    sortOrder: params.order,
                    query: params.search,
                    tag: "list"
                };
            },
            columns,
            onLoadSuccess: function (data) {
                $("[data-bs-toggle='tooltip']").tooltip();
            }
        });
    </script>
</body>

</html>